<template>
	<view>
		<view class="u-page">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item,index) in setmealList">

					<u-row customStyle="margin-bottom: 10px">
						<u-col span="4">
							<view class="demo-layout bg-purple-light">
								<u-cell>
									<u-avatar slot="icon" shape="square" size="100"
										:src="'http://localhost:9900/image/'+item.img">
									</u-avatar>
								</u-cell>
							</view>
						</u-col>
						<u-col span="5" style="margin-left:25rpx;">
							<view class="demo-layout bg-purple">
								<p><span style="color:red">{{item.name}}</span> </p>
								<p>适用性别： <span>{{item.sex}}</span> </p>
								<p>套餐价格: <span style="color:red">{{item.price}}</span>元 </p>
							</view>
						</u-col>
						<u-col span="3" style="margin-left:-25rpx;">
							<view class="demo-layout bg-purple">
								<u-button @tap="showMoreBtn(item.id)" type="error" text="详情" style="width: 130rpx;"></u-button>
							</view>
						</u-col>
					</u-row>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				setmealList:[]
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				// http://localhost:9900/api/setmeal
				uni.request({
				    url: 'http://localhost:9900/api/setmeal', //仅为示例，并非真实接口地址。
				    success: (res) => {
				        console.log(res.data.data);
				       this.setmealList=res.data.data
				    }
				});
			},
			showMoreBtn(id){
				// alert("111")
				// 带有id 跳转另一个页面
				uni.navigateTo({
					url:"../xiangqing/xiangqing?id="+id
				})
			}
		}
	}
</script>

<style>

</style>
